<template>
  <div class="dashboard">
    <!-- 指标卡片区 -->
    <el-row :gutter="20" class="dashboard-cards">
      <el-col :span="6" v-for="card in cards" :key="card.title">
        <el-card class="dashboard-card" shadow="hover">
          <div class="icon-wrapper">
            <el-icon :size="36" :color="card.color">
              <component :is="card.icon" />
            </el-icon>
          </div>
          <div class="card-content">
            <div class="card-title">{{ card.title }}</div>
            <div class="card-value">{{ card.value }}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="dashboard-main" style="margin-top: 28px;">
      <el-col :span="16">
        <el-card class="dashboard-chart-card" shadow="hover">
          <div class="chart-title">本月工单趋势</div>
          <div ref="trendChart" class="chart" style="height:420px;"></div>
        </el-card>
        <el-card class="dashboard-chart-card" shadow="hover" style="margin-top: 24px;">
          <div class="chart-title">年度废弃物利用率</div>
          <div ref="reuseChart" class="chart" style="height:320px;"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="dashboard-actions" shadow="hover">
          <div class="quick-title">快捷入口</div>
          <el-button type="primary" size="large" round style="margin-bottom:14px;width:100%;"
            @click="toCreateWorkOrder">
            新建工单
          </el-button>
          <el-button type="success" size="large" round style="margin-bottom:14px;width:100%;"
            @click="toStartEvaluation">
            绿色性能评估与提升
          </el-button>
          <el-button size="large" round style="margin-bottom:14px;width:100%;" @click="toKnowledgeBase">
            知识库
          </el-button>
        </el-card>
        <el-card class="dashboard-announcement" shadow="hover" style="margin-top:24px;">
          <el-alert title="系统公告" description="本平台面向建筑资产全生命周期的绿色运维、
          修复管理、智能评估与规范标准等核心业务，支持资产设备、物料流转、保养修复、绿色评估、
          知识标准等全方位数据模拟与管理演示。所有功能与数据仅作前端体验展示，不涉及真实业务。" type="info" show-icon />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import { DataLine, Tools, StarFilled, RefreshRight } from '@element-plus/icons-vue'
import { useRouter } from "vue-router"

const router = useRouter()


// 指标卡片区数据
const cards = [
  { title: '设备总数', value: 120, icon: DataLine, color: '#409EFF' },
  { title: '今日修复工单', value: 5, icon: Tools, color: '#67C23A' },
  { title: '绿色评分', value: 89, icon: StarFilled, color: '#E6A23C' },
  { title: '废弃物利用率', value: '92%', icon: RefreshRight, color: '#13c2c2' }
]

// 图表 DOM
const trendChart = ref(null)
const reuseChart = ref(null)

onMounted(() => {
  // 工单趋势（折线）
  const trend = echarts.init(trendChart.value)
  const days = Array.from({ length: 30 }, (_, i) => `6-${i + 1}`)
  const repairData = days.map(() => Math.round(3 + Math.random() * 4))
  const maintainData = days.map(() => Math.round(2 + Math.random() * 3))
  const reportData = days.map(() => Math.round(1 + Math.random() * 2))
  trend.setOption({
    tooltip: { trigger: 'axis' },
    legend: { data: ['修复', '保养', '报修'] },
    xAxis: { type: 'category', data: days, boundaryGap: false },
    yAxis: { type: 'value' },
    series: [
      { name: '修复', type: 'line', data: repairData, smooth: true },
      { name: '保养', type: 'line', data: maintainData, smooth: true },
      { name: '报修', type: 'line', data: reportData, smooth: true }
    ],
    color: ['#409EFF', '#13c2c2', '#E6A23C']
  })

  // 年度废弃物利用率（柱状）
  const reuse = echarts.init(reuseChart.value)
  reuse.setOption({
    tooltip: {},
    xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] },
    yAxis: { type: 'value', min: 80, max: 100 },
    series: [{
      name: '利用率',
      type: 'bar',
      data: [90, 91, 92, 93, 91, 92, 94, 93, 92, 95, 96, 95],
      barWidth: 28,
      itemStyle: {
        borderRadius: [8, 8, 0, 0],
        color: '#13c2c2'
      }
    }]
  })
})

// 快捷入口
function toCreateWorkOrder() {
  router.push("/workorder/repair-order")
}
function toStartEvaluation() {
  router.push("/green/result")
}

function toKnowledgeBase() {
  router.push("/knowledge/fault")
}
</script>

<style scoped>
.dashboard {
  padding: 32px 24px;
  background: #f6f9fa;
  min-height: 100vh;
}

.dashboard-cards {
  margin-bottom: 24px;
}

.dashboard-card {
  border-radius: 16px;
  display: flex;
  align-items: center;
  min-height: 106px;
  background: linear-gradient(120deg, #fff 80%, #e0f7fa 100%);
  box-shadow: 0 2px 12px #0001;
}

.icon-wrapper {
  margin-right: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, #e0f7fa 40%, #fff 100%);
  border-radius: 50%;
  box-shadow: 0 1px 5px #409eff33;
}

.card-content {
  flex: 1;
  text-align: left;
}

.card-title {
  font-size: 15px;
  color: #888;
}

.card-value {
  font-size: 32px;
  font-weight: bold;
  color: #222;
  margin-top: 5px;
}

.chart-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 16px;
}

.chart {
  width: 100%;
}

.dashboard-actions {
  border-radius: 16px;
  box-shadow: 0 2px 12px #0001;
  margin-bottom: 16px;
}

.quick-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 16px;
}

.dashboard-announcement {
  border-radius: 16px;
  box-shadow: 0 2px 12px #0001;
}
</style>
